<template>
    <div id="allmap" class="b-map">

        <script id="my-infowin-tpl" type="text/template">
          <div class="  my-windows">
            <div class=" my-windows-title">
                详细信息
                <a class="amap-ui-infowindow-close my-windows-close">&#10006;</a>
            </div>
            <div class=" my-windows-content" >

              <div class="my-windows-row">
                <div class="my-windows-label">工程名称:</div>
                <div class="my-windows-value"><%= name %></div>
              </div>
              <div class="my-windows-row">
                <div class="my-windows-label">工程地址:</div>
                <div class="my-windows-value"><%= address %></div>
              </div>
              <div class="my-windows-row">
                <div class="my-windows-label">是否住房:</div>
                <div class="my-windows-value"><%= isLive?'是':'否' %></div>
              </div>
              <div class="my-windows-row">
                <div class="my-windows-label">影&nbsp;&nbsp;响&nbsp;&nbsp;度:</div>
                <div class="my-windows-value"><%= effect %></div>
              </div>
              <div class="my-windows-row">
                <div class="my-windows-label">工程状态:</div>
                <div class="my-windows-value">
                 <%= state==1?'正常':'报警' %>
                </div>
              </div>
            </div>
          </div>
        </script>
    </div>

</template>

<script>

  export default {
    name: "b-map",
    props: {

    },
    components: {},
    data() {
      return {
        map:null,
        cluster:null,
        markers:[]
      }
    },
    methods: {
      initMap(){

        let map = new AMap.Map("allmap", {
          resizeEnable: true,
          center: [105, 34],
          zoom: 4
        });

        map.setMapStyle('amap://styles/def83a17d2fb03e173c5401fb5d87c9e');

        AMapUI.defineTpl("ui/overlay/SimpleInfoWindow/tpl/container.html", [], function() {
          return document.getElementById('my-infowin-tpl').innerHTML;
        });

        this.map=map;
      },
      changeMapData(points){
        let markers = [];


       let _this=this;


        AMapUI.loadUI(['overlay/SimpleInfoWindow'], function(SimpleInfoWindow) {



          for (let i = 0; i < points.length; i += 1) {
            let marker=new AMap.Marker({
              position: [points[i]['lng'],points[i]['lat']],
              content: '<div class="my-marker my-marker-'+points[i]['type']+'"></div>',
              offset: new AMap.Pixel(-15, -15)
            })
            markers.push(marker)

            let infoWindow = new SimpleInfoWindow({
              name: points[i]['name'],
              address: points[i]['address'],
              isLive: points[i]['isLiveHome'],
              effect: points[i]['value'],
              state: points[i]['type'],
              //基点指向marker的头部位置
              offset: new AMap.Pixel(0, -31)
            });

            AMap.event.addListener(marker, 'click', function() {
              infoWindow.open(_this.map, marker.getPosition());
              _this.map.setCenter(marker.getPosition())
            });
          }


          let sts = [{
            url: "http://api.fangdafu.com/large_screen/map-icon/m1.png",
            size: new AMap.Size(52, 52),
            offset: new AMap.Pixel(-26, -26),
            textColor:'#fff'
          }, {
            url: "http://api.fangdafu.com/large_screen/map-icon/m2.png",
            size: new AMap.Size(56, 56),
            offset: new AMap.Pixel(-28, -28),
            textColor:'#fff'
          }, {
            url: "http://api.fangdafu.com/large_screen/map-icon/m3.png",
            size: new AMap.Size(66, 66),
            offset: new AMap.Pixel(-33, -33),
            textColor:'#fff'
          }, {
            url: "http://api.fangdafu.com/large_screen/map-icon/m4.png",
            size: new AMap.Size(78, 78),
            offset: new AMap.Pixel(-39, -39),
            textColor:'#fff'
          }, {
            url: "http://api.fangdafu.com/large_screen/map-icon/m5.png",
            size: new AMap.Size(90, 90),
            offset: new AMap.Pixel(-45, -45),
            textColor:'#fff'
          }];

          if(!_this.cluster){
            _this.cluster = new AMap.MarkerClusterer(_this.map, markers, {styles: sts,gridSize: 80});
            console.log("cluster init")
          }

          _this.cluster.clearMarkers();
          _this.cluster.addMarkers(markers)

        });



      }
    },
    created(){

    },
    beforeDestroy(){
      if(this.map!=null)
        this.map.destroy();
      this.map=null;
    },
    mounted(){
      this.initMap()
    }
  }
</script>

<style lang="scss" scoped>

  .b{
    &-map{
        border-radius: 10px;
    }
  }

</style>